<script lang="ts" setup>
import { CascaderOption, ElMessage } from 'element-plus';
import { computed, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { Storekey } from '../../interface';
import { findpid } from '../../util/code';

const p = defineProps<{ max?: number, label: number[] }>()

const setlabel = ref<number[]>([])

type E = {
    (e: 'change:label', value?: number[]): void
    (event: 'update:label', id: number[]): void
}
const store = useStore(Storekey)

const grouplabel = computed(() => {
    const data = store.state.label?.rows.filter((e) => e.type === "题目标签");
    return findpid(data ? data : []) as CascaderOption[]
});

const getlabel = computed(() => {
    return store.state.label?.rows.filter((e) => e.type === "题目标签") || []
})


watch(() => p.label, e => {
    setlabel.value = e
})


const emit = defineEmits<E>()

function grouplabelclick(item: number) {
    if (!Array.isArray(setlabel.value)) setlabel.value = []
    const i = setlabel.value.findIndex(e => e === item)
    if (i != -1) {
        setlabel.value.splice(i, 1)
    } else {
        if (p.max && p.max <= setlabel.value.length) {
            ElMessage.error(`最多只能选择${p.max}个`)
            return
        }
        setlabel.value.push(item)
    }
}

watch(() => setlabel.value, e => {
    emit('update:label', setlabel.value)
})


watch(setlabel.value, e => {
    emit('update:label', setlabel.value)
})


</script>

<template>
    <div :style="{ color: '#000' }">
        <div class="border-bottom m-mb-3 m-p-3 labeldatahead">

            <div class="row">
                <h6 class="col">已选标签（{{ setlabel?.length }}）</h6>
                <div class="col text-right">
                    <el-select placeholder="搜索全部标签" :multiple-limit="max" multiple collapse-tags filterable
                        v-model="setlabel" :style="{ width: '200px' }" size="large">
                        <el-option v-for="v in getlabel" :label="v.name" :value="Number(v.ID)"></el-option>
                    </el-select>
                </div>
            </div>
            <div>
                <el-tag size="small" effect="dark" v-for="(tag, i) in setlabel" :key="i" class="mx-1" closable
                    @close="() => setlabel.splice(i, 1)">
                    {{ getlabel.find(e => e.ID === tag)?.name }}
                </el-tag>
            </div>
        </div>
        <div class="labeldata">
            <div v-for="group in  grouplabel " class="border-bottom m-mb-3 m-p-3">
                <header class="header-h5">{{ group.name }}</header>
                <el-button class="m-mb-3 font-bold" bg text size="small"
                    :type="setlabel?.includes(Number(group.ID)) ? 'primary' : 'default'"
                    @click="grouplabelclick(Number(group.ID))">
                    {{ group.name }}
                </el-button>
                <el-button class="m-mb-3" size="small" :type="setlabel?.includes(Number(v.ID)) ? 'primary' : 'default'"
                    @click="grouplabelclick(Number(v.ID))" bg text
                    v-for="v in findpid(getlabel, Number(group.ID)).filter(e => !e.children?.length)">
                    {{ v.name }}
                </el-button>
                <div v-for="v in findpid(getlabel, Number(group.ID)).filter(e => e.children?.length)">
                    <el-button class="m-mb-3  font-bold" size="small"
                        :type="setlabel?.includes(Number(v.ID)) ? 'primary' : 'default'"
                        @click="grouplabelclick(Number(v.ID))" bg text>
                        {{ v.name }}
                    </el-button>
                    <el-button class="m-mb-3"
                        v-for="t in findpid(v.children || [], Number(v.ID)).filter(e => !e.children?.length)"
                        size="small" :type="setlabel?.includes(Number(t.ID)) ? 'primary' : 'default'"
                        @click="grouplabelclick(Number(t.ID))" bg text>
                        {{ t.name }}
                    </el-button>
                    <div v-for="t in findpid(v.children || [], Number(v.ID)).filter(e => e.children?.length)">
                        <el-button class="m-mb-3  font-bold" size="small"
                            :type="setlabel?.includes(Number(t.ID)) ? 'primary' : 'default'"
                            @click="grouplabelclick(Number(t.ID))" bg text>
                            {{ t.name }}
                        </el-button>
                        <el-button class="m-mb-3"
                            v-for="v in findpid(t.children || [], Number(t.ID)).filter(e => !e.children?.length)"
                            size="small" :type="setlabel?.includes(Number(v.ID)) ? 'primary' : 'default'"
                            @click="grouplabelclick(Number(v.ID))" bg text>
                            {{ v.name }}
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

    </div>

</template>

<style scoped>
.labeldata {
    height: 450px;
    overflow: auto;
}

.labeldatahead {
    min-height: 100px;
}

.m-mb-3 {
    --el-button-text-color: #000;
}

.header-h5 {
    font-size: 16px;
    margin-bottom: 24px;
}

.font-bold {
    --el-button-font-weight: 600;

}
</style>

<style>
.labeldatahead .el-select__tags {
    max-width: 200px !important;
}

.labeldata .el-button {
    margin-left: 0 !important;
    margin-right: 12px !important;
}
</style>